<template>
  <div class="app-container">


    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :model="searchForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="方案名称">
              <el-input v-model="searchForm.keyword" placeholder="请输入方案名称或编号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方案来源">
              <el-select v-model="searchForm.source" placeholder="全部" clearable>
                <el-option label="手动录入" value="manual" />
                <el-option label="调度日志" value="log" />
                <el-option label="调度经验" value="experience" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 主内容区域 - 左右布局 -->
    <div class="main-content">
      <!-- 左侧分类列表 -->
      <div class="left-panel">
        <el-card class="category-card">
          <div slot="header" class="category-header">
            <span>方案分类</span>
            <el-icon>
              <Plus color="#409eff" />
            </el-icon>
          </div>
          <el-tree :data="categories" node-key="id" default-expand-all :props="categoryProps" :expand-on-click-node="false"
            @node-click="handleCategoryClick" :default-expanded-keys="['1']" />
        </el-card>
      </div>

      <!-- 右侧方案列表 -->
      <div class="right-panel">
        <el-card class="solution-list-card">
          <el-dropdown @command="handleAddSolution">
            <el-button type="primary">
              <el-icon>
                <Plus />
              </el-icon>
              新增方案
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="manual">手动录入</el-dropdown-item>
                <el-dropdown-item command="log">从调度日志添加</el-dropdown-item>
                <el-dropdown-item command="experience">从调度经验添加</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button style="margin-left: 10px;" @click="editSolution" :disabled="!selectedSolution">
            <el-icon>
              <Edit />
            </el-icon>
            编辑
          </el-button>
          <el-button @click="deleteSolution" :disabled="!selectedSolution" type="danger">
            <el-icon>
              <Delete />
            </el-icon>
            删除
          </el-button>
          <el-table class="mt-2" :data="filteredSolutions" border style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="index" label="序号" width="80" />
            <el-table-column prop="name" label="方案名称" width="250">
              <template #default="{ row }">
                <div class="solution-name">{{ row.name }}</div>
                <div class="solution-category">{{ row.categoryName }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="方案编号" width="180" />
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column prop="creator" label="创建人" width="120" />
            <el-table-column prop="source" label="方案来源" width="120">
              <template #default="{ row }">
                <el-tag :type="getSourceTagType(row.source)">
                  {{ getSourceText(row.source) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="{ row }">
                <el-button type="text" @click="viewSolution(row)">查看</el-button>
                <el-button type="text" @click="editSolution(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination">
            <span class="total-count">共 {{ total }} 条</span>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]" layout="sizes, prev, pager, next" :total="total" />
            <span class="page-jump">前往 <el-input v-model="goToPage" /> 页</span>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 手动录入方案对话框 -->
    <el-dialog v-model="manualDialog.visible" :title="`${manualDialog.mode === 'add' ? '新增' : '编辑'}方案`" width="50%">
      <el-form :model="manualForm" label-width="100px" :rules="manualRules" ref="manualFormRef">
        <el-form-item label="方案名称" prop="name">
          <el-input v-model="manualForm.name" placeholder="请输入方案名称" />
        </el-form-item>

        <el-form-item label="方案编号" prop="code">
          <el-input v-model="manualForm.code" placeholder="自动生成" :disabled="true" />
        </el-form-item>

        <el-form-item label="所属分类" prop="category">
          <el-select v-model="manualForm.category" placeholder="请选择分类">
            <el-option v-for="category in flatCategories" :key="category.id" :label="category.name"
              :value="category.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="方案描述">
          <el-input v-model="manualForm.description" type="textarea" :rows="3" placeholder="请输入方案描述" />
        </el-form-item>

        <el-form-item label="方案内容" prop="content">
          <el-input v-model="manualForm.content" type="textarea" :rows="6" placeholder="请输入详细方案内容" />
        </el-form-item>

        <el-form-item label="附件上传">
          <el-upload v-model:file-list="manualForm.attachments" action="#" multiple :auto-upload="false" :limit="5"
            :on-exceed="handleExceed">
            <el-button type="primary">选择文件</el-button>
            <template #tip>
              <div class="upload-tip">
                支持上传PDF、Word、Excel文件，单个文件不超过10MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="manualDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="submitManualForm">确定</el-button>
      </template>
    </el-dialog>

    <!-- 从调度日志添加方案对话框 -->
    <el-dialog v-model="logDialog.visible" title="从调度日志添加方案" width="70%">
      <div class="dialog-search">
        <el-input v-model="logSearch.keyword" placeholder="搜索调度日志" clearable style="width: 300px;" />
        <el-button type="primary" @click="searchLogs">搜索</el-button>
      </div>

      <el-table :data="filteredLogs" border style="width: 100%" @selection-change="handleLogSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="title" label="日志标题" width="200" />
        <el-table-column prop="content" label="日志内容">
          <template #default="{ row }">
            <div class="log-content">{{ row.content }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="recorder" label="记录人" width="120" />
      </el-table>

      <template #footer>
        <el-button @click="logDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddFromLogs">确定</el-button>
      </template>
    </el-dialog>

    <!-- 从调度经验添加方案对话框 -->
    <el-dialog v-model="experienceDialog.visible" title="从调度经验添加方案" width="70%">
      <div class="dialog-search">
        <el-input v-model="experienceSearch.keyword" placeholder="搜索调度经验" clearable style="width: 300px;" />
        <el-button type="primary" @click="searchExperiences">搜索</el-button>
      </div>

      <el-table :data="filteredExperiences" border style="width: 100%"
        @selection-change="handleExperienceSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="title" label="经验标题" width="200" />
        <el-table-column prop="content" label="经验内容">
          <template #default="{ row }">
            <div class="experience-content">{{ row.content }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="submitter" label="提交人" width="120" />
        <el-table-column prop="date" label="提交日期" width="120" />
      </el-table>

      <template #footer>
        <el-button @click="experienceDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddFromExperiences">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { Plus, Edit, Delete } from '@element-plus/icons-vue';

// 方案分类数据
const categories = ref([
  {
    id: '1',
    name: '供水调度方案',
    children: [
      { id: '1-1', name: '高峰供水方案' },
      { id: '1-2', name: '低峰供水方案' },
      { id: '1-3', name: '应急供水方案' }
    ]
  },
  {
    id: '2',
    name: '管网维护方案',
    children: [
      { id: '2-1', name: '日常维护' },
      { id: '2-2', name: '定期检修' },
      { id: '2-3', name: '紧急抢修' }
    ]
  },
  {
    id: '3',
    name: '水质管理方案',
    children: [
      { id: '3-1', name: '水质监测' },
      { id: '3-2', name: '水质改善' },
      { id: '3-3', name: '应急处理' }
    ]
  }
]);

// 平铺的分类列表用于选择
const flatCategories = computed(() => {
  const result = [];
  categories.value.forEach(category => {
    result.push({ id: category.id, name: category.name });
    if (category.children) {
      category.children.forEach(child => {
        result.push({ id: child.id, name: `${category.name}-${child.name}` });
      });
    }
  });
  return result;
});

const categoryProps = {
  children: 'children',
  label: 'name'
};

// 方案列表数据
const solutions = ref([
  {
    id: 1,
    name: '2023年夏季高峰供水调度方案',
    code: 'SC-2023-001',
    category: '1-1',
    categoryName: '供水调度方案-高峰供水方案',
    createTime: '2023-05-10 14:30',
    creator: '张明远',
    source: 'manual',
    description: '夏季高峰供水期间的调度方案',
    content: '详细的高峰供水调度方案内容...',
    attachments: []
  },
  {
    id: 2,
    name: '城东片区管网压力调节方案',
    code: 'SC-2023-002',
    category: '1-1',
    categoryName: '供水调度方案-高峰供水方案',
    createTime: '2023-05-15 09:15',
    creator: '李思雨',
    source: 'log',
    description: '城东片区管网压力调节方案',
    content: '详细的管网压力调节方案内容...',
    attachments: []
  },
  {
    id: 3,
    name: '老旧管网改造技术方案',
    code: 'SC-2023-003',
    category: '2-2',
    categoryName: '管网维护方案-定期检修',
    createTime: '2023-05-18 16:45',
    creator: '王建国',
    source: 'experience',
    description: '老旧管网改造技术方案',
    content: '详细的老旧管网改造技术方案内容...',
    attachments: []
  },
  {
    id: 4,
    name: '水质异常应急处理方案',
    code: 'SC-2023-004',
    category: '3-3',
    categoryName: '水质管理方案-应急处理',
    createTime: '2023-05-20 11:20',
    creator: '陈晓芳',
    source: 'manual',
    description: '水质异常应急处理方案',
    content: '详细的水质异常应急处理方案内容...',
    attachments: []
  },
  {
    id: 5,
    name: '冬季防冻裂供水保障方案',
    code: 'SC-2023-005',
    category: '1-3',
    categoryName: '供水调度方案-应急供水方案',
    createTime: '2023-05-22 13:10',
    creator: '赵志强',
    source: 'experience',
    description: '冬季防冻裂供水保障方案',
    content: '详细的冬季防冻裂供水保障方案内容...',
    attachments: []
  },
  {
    id: 6,
    name: '水源切换操作流程方案',
    code: 'SC-2023-006',
    category: '1-2',
    categoryName: '供水调度方案-低峰供水方案',
    createTime: '2023-05-25 10:30',
    creator: '刘婷婷',
    source: 'log',
    description: '水源切换操作流程方案',
    content: '详细的水源切换操作流程方案内容...',
    attachments: []
  },
  {
    id: 7,
    name: '管网爆管应急抢修方案',
    code: 'SC-2023-007',
    category: '2-3',
    categoryName: '管网维护方案-紧急抢修',
    createTime: '2023-05-28 15:40',
    creator: '孙伟',
    source: 'manual',
    description: '管网爆管应急抢修方案',
    content: '详细的管网爆管应急抢修方案内容...',
    attachments: []
  },
  {
    id: 8,
    name: '水压平衡调节技术方案',
    code: 'SC-2023-008',
    category: '1-1',
    categoryName: '供水调度方案-高峰供水方案',
    createTime: '2023-06-01 09:25',
    creator: '周丽华',
    source: 'experience',
    description: '水压平衡调节技术方案',
    content: '详细的水压平衡调节技术方案内容...',
    attachments: []
  }
]);

// 搜索表单
const searchForm = reactive({
  keyword: '',
  source: ''
});

// 分页数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = computed(() => filteredSolutions.value.length);
const goToPage = ref(1);

// 选中的方案
const selectedSolution = ref(null);
const selectedSolutions = ref([]);

// 过滤后的方案列表
const filteredSolutions = computed(() => {
  let result = solutions.value.map((item, index) => ({
    ...item,
    index: index + 1
  }));

  // 按关键词筛选
  if (searchForm.keyword) {
    const keyword = searchForm.keyword.toLowerCase();
    result = result.filter(item =>
      item.name.toLowerCase().includes(keyword) ||
      item.code.toLowerCase().includes(keyword)
    );
  }

  // 按来源筛选
  if (searchForm.source) {
    result = result.filter(item => item.source === searchForm.source);
  }

  // 分页
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return result.slice(start, end);
});

// 获取方案来源标签样式
const getSourceTagType = (source) => {
  switch (source) {
    case 'manual': return '';
    case 'log': return 'success';
    case 'experience': return 'warning';
    default: return '';
  }
};

// 获取方案来源文本
const getSourceText = (source) => {
  switch (source) {
    case 'manual': return '手动录入';
    case 'log': return '调度日志';
    case 'experience': return '调度经验';
    default: return source;
  }
};

// 处理分类点击
const handleCategoryClick = (data) => {
  console.log('选中分类:', data);
  // 实际项目中这里应该根据分类筛选方案
};

// 处理方案选择
const handleSelectionChange = (val) => {
  selectedSolutions.value = val;
  selectedSolution.value = val.length === 1 ? val[0] : null;
};

// 搜索
const handleSearch = () => {
  currentPage.value = 1;
};

// 重置搜索
const resetSearch = () => {
  searchForm.keyword = '';
  searchForm.source = '';
  currentPage.value = 1;
};

// 查看方案详情
const viewSolution = (solution) => {
  console.log('查看方案:', solution);
  // 实际项目中这里应该打开详情弹窗
};

// 编辑方案
const editSolution = (solution) => {
  const target = solution || selectedSolution.value;
  if (!target) {
    ElMessage.warning('请先选择要编辑的方案');
    return;
  }

  manualDialog.mode = 'edit';
  manualDialog.visible = true;
  manualForm.id = target.id;
  manualForm.name = target.name;
  manualForm.code = target.code;
  manualForm.category = target.category;
  manualForm.description = target.description;
  manualForm.content = target.content;
  manualForm.attachments = [...target.attachments];
};

// 删除方案
const deleteSolution = () => {
  if (!selectedSolution.value && selectedSolutions.value.length === 0) {
    ElMessage.warning('请先选择要删除的方案');
    return;
  }

  const toDelete = selectedSolutions.value.length > 0
    ? selectedSolutions.value
    : [selectedSolution.value];

  ElMessageBox.confirm(
    `确定要删除选中的${toDelete.length}条方案吗?`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const ids = toDelete.map(item => item.id);
    solutions.value = solutions.value.filter(item => !ids.includes(item.id));
    selectedSolutions.value = [];
    selectedSolution.value = null;
    ElMessage.success('删除成功');
  }).catch(() => {
    // 取消删除
  });
};

// 新增方案处理
const handleAddSolution = (command) => {
  switch (command) {
    case 'manual':
      showManualDialog();
      break;
    case 'log':
      showLogDialog();
      break;
    case 'experience':
      showExperienceDialog();
      break;
  }
};

// 手动录入方案对话框
const manualDialog = reactive({
  visible: false,
  mode: 'add' // 'add' or 'edit'
});

const manualFormRef = ref(null);

const manualForm = reactive({
  id: null,
  name: '',
  code: '',
  category: '',
  description: '',
  content: '',
  attachments: []
});

const manualRules = {
  name: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择分类', trigger: 'change' }],
  content: [{ required: true, message: '请输入方案内容', trigger: 'blur' }]
};

// 显示手动录入对话框
const showManualDialog = () => {
  manualDialog.mode = 'add';
  manualDialog.visible = true;

  // 重置表单
  Object.assign(manualForm, {
    id: null,
    name: '',
    code: generateSolutionCode(),
    category: '',
    description: '',
    content: '',
    attachments: []
  });
};

// 生成方案编号
const generateSolutionCode = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const count = solutions.value.filter(item => {
    const itemYear = item.code.split('-')[1];
    return itemYear === String(year);
  }).length + 1;

  return `SC-${year}-${String(count).padStart(3, '0')}`;
};

// 处理文件超出限制
const handleExceed = () => {
  ElMessage.warning('最多上传5个文件');
};

// 提交手动录入表单
const submitManualForm = () => {
  manualFormRef.value.validate(valid => {
    if (!valid) return;

    if (manualDialog.mode === 'add') {
      // 新增方案
      const newSolution = {
        id: solutions.value.length + 1,
        name: manualForm.name,
        code: manualForm.code,
        category: manualForm.category,
        categoryName: flatCategories.value.find(c => c.id === manualForm.category)?.name || '',
        createTime: new Date().toLocaleString(),
        creator: '当前用户',
        source: 'manual',
        description: manualForm.description,
        content: manualForm.content,
        attachments: [...manualForm.attachments]
      };

      solutions.value.unshift(newSolution);
      ElMessage.success('方案添加成功');
    } else {
      // 编辑方案
      const index = solutions.value.findIndex(item => item.id === manualForm.id);
      if (index !== -1) {
        solutions.value[index] = {
          ...solutions.value[index],
          name: manualForm.name,
          category: manualForm.category,
          categoryName: flatCategories.value.find(c => c.id === manualForm.category)?.name || '',
          description: manualForm.description,
          content: manualForm.content,
          attachments: [...manualForm.attachments]
        };
        ElMessage.success('方案修改成功');
      }
    }

    manualDialog.visible = false;
  });
};

// 从调度日志添加方案对话框
const logDialog = reactive({
  visible: false
});

const logSearch = reactive({
  keyword: ''
});

const logs = ref([
  {
    id: 1,
    date: '2023-05-10',
    title: '城东片区水压异常记录',
    content: '城东片区多个用户反映水压偏低，经排查为3号水泵故障，更换后恢复正常',
    recorder: '张明远'
  },
  {
    id: 2,
    date: '2023-05-12',
    title: '水源切换操作记录',
    content: '因主水源水质波动，切换至备用水源，操作过程顺利，未影响用户用水',
    recorder: '李思雨'
  },
  {
    id: 3,
    date: '2023-05-15',
    title: '管网爆管抢修记录',
    content: '中山路与解放路交叉口DN600主管爆裂，紧急抢修6小时恢复供水',
    recorder: '王建国'
  },
  {
    id: 4,
    date: '2023-05-18',
    title: '水质异常处理记录',
    content: '用户反映水质浑浊，经排查为管网冲洗作业导致，已做好解释工作',
    recorder: '陈晓芳'
  },
  {
    id: 5,
    date: '2023-05-20',
    title: '高峰供水压力调节记录',
    content: '早高峰时段调整泵站运行参数，平衡管网压力，效果良好',
    recorder: '赵志强'
  }
]);

const selectedLogs = ref([]);

const filteredLogs = computed(() => {
  if (!logSearch.keyword) return logs.value;
  const keyword = logSearch.keyword.toLowerCase();
  return logs.value.filter(log =>
    log.title.toLowerCase().includes(keyword) ||
    log.content.toLowerCase().includes(keyword) ||
    log.recorder.toLowerCase().includes(keyword)
  );
});

// 显示从日志添加对话框
const showLogDialog = () => {
  logDialog.visible = true;
  logSearch.keyword = '';
  selectedLogs.value = [];
};

// 处理日志选择
const handleLogSelectionChange = (val) => {
  selectedLogs.value = val;
};

// 搜索日志
const searchLogs = () => {
  // 搜索逻辑已在计算属性中实现
};

// 确认从日志添加方案
const confirmAddFromLogs = () => {
  if (selectedLogs.value.length === 0) {
    ElMessage.warning('请至少选择一条日志');
    return;
  }

  // 这里应该打开一个表单让用户完善方案信息
  // 简化处理，直接创建方案
  selectedLogs.value.forEach(log => {
    const newSolution = {
      id: solutions.value.length + 1,
      name: `${log.title}方案`,
      code: generateSolutionCode(),
      category: '',
      categoryName: '',
      createTime: new Date().toLocaleString(),
      creator: '当前用户',
      source: 'log',
      description: `基于日志【${log.title}】创建`,
      content: log.content,
      attachments: []
    };

    solutions.value.unshift(newSolution);
  });

  ElMessage.success(`成功从${selectedLogs.value.length}条日志创建方案`);
  logDialog.visible = false;
};

// 从调度经验添加方案对话框
const experienceDialog = reactive({
  visible: false
});

const experienceSearch = reactive({
  keyword: ''
});

const experiences = ref([
  {
    id: 1,
    title: '老旧管网维护经验',
    content: '总结了一套针对老旧管网的预防性维护方法，包括定期检测、重点部位加固等技术要点',
    submitter: '王建国',
    date: '2023-04-15'
  },
  {
    id: 2,
    title: '冬季防冻裂措施',
    content: '针对北方地区冬季供水管网防冻裂的有效措施，包括保温材料选择、易冻部位处理等',
    submitter: '赵志强',
    date: '2023-04-20'
  },
  {
    id: 3,
    title: '水质异常快速处理方法',
    content: '总结水质异常时的快速判断和处理流程，包括采样分析、污染源定位等实用技巧',
    submitter: '陈晓芳',
    date: '2023-04-25'
  },
  {
    id: 4,
    title: '高峰供水调度技巧',
    content: '高峰供水时间段管网的压力平衡调节的经验总结，包括泵站联动、压力监测点设置等',
    submitter: '张明远',
    date: '2023-05-05'
  },
  {
    id: 5,
    title: '爆管抢修组织经验',
    content: '大型爆管事故抢修时的组织协调和现场管理经验，包括人员分工、物资调配等要点',
    submitter: '孙伟',
    date: '2023-05-10'
  }
]);

const selectedExperiences = ref([]);

const filteredExperiences = computed(() => {
  if (!experienceSearch.keyword) return experiences.value;
  const keyword = experienceSearch.keyword.toLowerCase();
  return experiences.value.filter(exp =>
    exp.title.toLowerCase().includes(keyword) ||
    exp.content.toLowerCase().includes(keyword) ||
    exp.submitter.toLowerCase().includes(keyword)
  );
});

// 显示从经验添加对话框
const showExperienceDialog = () => {
  experienceDialog.visible = true;
  experienceSearch.keyword = '';
  selectedExperiences.value = [];
};

// 处理经验选择
const handleExperienceSelectionChange = (val) => {
  selectedExperiences.value = val;
};

// 搜索经验
const searchExperiences = () => {
  // 搜索逻辑已在计算属性中实现
};

// 确认从经验添加方案
const confirmAddFromExperiences = () => {
  if (selectedExperiences.value.length === 0) {
    ElMessage.warning('请至少选择一条经验');
    return;
  }

  // 这里应该打开一个表单让用户完善方案信息
  // 简化处理，直接创建方案
  selectedExperiences.value.forEach(exp => {
    const newSolution = {
      id: solutions.value.length + 1,
      name: `${exp.title}方案`,
      code: generateSolutionCode(),
      category: '',
      categoryName: '',
      createTime: new Date().toLocaleString(),
      creator: '当前用户',
      source: 'experience',
      description: `基于经验【${exp.title}】创建`,
      content: exp.content,
      attachments: []
    };

    solutions.value.unshift(newSolution);
  });

  ElMessage.success(`成功从${selectedExperiences.value.length}条经验创建方案`);
  experienceDialog.visible = false;
};
</script>

<style scoped>


.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.search-card {
  margin-bottom: 20px;
}

.main-content {
  display: flex;
  gap: 20px;
}

.left-panel {
  width: 250px;
}

.right-panel {
  flex: 1;
}

.category-card {
  height: 100%;
}

.category-header {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.solution-list-card {
  height: 100%;
}

.solution-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.solution-category {
  font-size: 12px;
  color: #909399;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
  gap: 20px;
}

.total-count {
  margin-right: auto;
}

.page-jump {
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-jump .el-input {
  width: 60px;
}

.dialog-search {
  margin-bottom: 20px;
}

.log-content,
.experience-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}


.search-card :deep(.el-form-item) {
    margin-bottom: 0px;
}
</style>